<template>
	<view>
		<u-navbar placeholder fixed autoBack border title="我的工资"></u-navbar>
		<view class="d-p-30" v-if="info">
			<view><text class="d-font-36" style="font-weight: bold;">人员信息</text></view>
			<view class="card d-m-t-30 d-p-30">
				<view class="d-flex" style="font-weight: bold;color: #162233;">
					<view class="d-m-t-10"><u--image :src="info.profile || '/static/image/photo.png'" width="180rpx" height="210rpx" radius="6"></u--image></view>
					<view class="d-flex-1 d-p-l-30">
						<view class="d-flex">
							<text class="d-font-36 u-line-1" style="max-width: 290rpx;">{{ info.xm }}</text>
							<text class="d-font-24 d-m-l-40 d-m-r-20" style="color: #ADB4BD;">{{ info.xb || '保密' }}</text>
							<u-line direction="col" length="36rpx"></u-line>
							<text class="d-font-24 d-m-l-20" style="color: #ADB4BD;">{{ info.mz || '无数据源' }}</text>
						</view>
						<view class="d-flex d-font-24 d-m-t-20">
							<text style="color: #ADB4BD;">电话</text>
							<u--text class="d-m-l-20" :customStyle="{ fontWeight: 'bold' }" color="#21A5F3" size="24rpx" mode="phone" call :text="info.lxfs"></u--text>
						</view>
						<view class="d-flex d-font-24 d-m-t-20">
							<view class="d-flex-1 d-flex">
								<text style="color: #ADB4BD;">班组</text>
								<text class="d-m-l-20 u-line-1" style="max-width: 160rpx;">{{ info.bzmc || '无数据源' }}</text>
							</view>
							<text style="color: #ADB4BD;">工种</text>
							<text class="d-m-l-20 u-line-1" style="min-width: 80rpx;max-width: 100rpx;">{{ info.drzw || '无数据源' }}</text>
						</view>
						<view class="d-flex d-font-24 d-m-t-20">
							<text style="color: #ADB4BD;">证件号码</text>
							<text class="d-m-l-20">{{ info.zjhm | str }}</text>
						</view>
					</view>
				</view>
				<view class="d-flex d-font-24 d-m-t-20" style="color: #162233;font-weight: bold;">
					<text>单位名称</text>
					<text class="d-m-l-20 d-flex-1 u-line-1">{{ info.qymc || '无数据源' }}</text>
				</view>
				<view class="d-flex d-font-24 d-m-t-10" style="color: #162233;font-weight: bold;">
					<text>所属项目名称</text>
					<text class="d-m-l-20 d-flex-1 u-line-1">{{ info.gcmc || '无数据源' }}</text>
				</view>
			</view>

			<view class="d-m-t-50"><text class="d-font-36" style="font-weight: bold;">工资信息</text></view>

			<view class="d-p-t-20"><uniDatetimePicker @change="setDate" v-model="rangeDate" type="daterange" :start="minDate" :end="maxDate"></uniDatetimePicker></view>

			<template v-if="!nowWages || nowWages.length <= 0">
				<view class="card d-m-t-20 d-p-80"><u-empty mode="list" icon="/static/image/none.png" text="暂无记录"></u-empty></view>
			</template>
			<template>
				<view class="card d-m-t-30 d-p-30" v-for="(item, index) in nowWages" :key="index">
					<view class="d-flex" style="color: #5D6672;">
						<view class="d-flex-1 d-font-28">
							<text style="font-weight: bold;">发放月份</text>
							<text class="d-m-l-20">{{ item.ffgzny ? $moment(item.ffgzny).format('YYYY年MM月') : '无数据源' }}</text>
						</view>
						<view class="d-font-28" style="width: 260rpx;">
							<text style="font-weight: bold;">发放日期</text>
							<text class="d-m-l-20">{{ item.createTime ? $moment(item.createTime).format('MM月DD日') : '无数据源' }}</text>
						</view>
					</view>
					<view class="d-flex d-m-t-20" style="color: #5D6672;">
						<view class="d-flex-1 d-font-28">
							<text style="font-weight: bold;">应发工资</text>
							<text class="d-m-l-20">{{ item.sfje || '0' }}元</text>
						</view>
						<view class="d-font-28" style="width: 260rpx;">
							<text style="font-weight: bold;">实发工资</text>
							<text class="d-m-l-20">{{ item.sfje || '0' }}元</text>
						</view>
					</view>
					<view class="d-flex d-m-t-20" style="color: #5D6672;">
						<view class="d-flex-1 d-font-28">
							<text style="font-weight: bold;">扣除工资</text>
							<text class="d-m-l-20">{{ item.hjkfgz || '0' }}元</text>
						</view>
					</view>
					<view class="d-flex d-m-t-20" style="color: #5D6672;">
						<view class="d-flex-1 d-font-28">
							<text style="font-weight: bold;">工资卡号</text>
							<text class="d-m-l-20">{{ item.gzkkh || '无数据源' }}</text>
						</view>
					</view>
					<view class="d-flex d-m-t-20" style="color: #5D6672;">
						<view class="d-flex-1 d-font-28" style="width: 260rpx;">
							<text style="font-weight: bold;">工资卡开卡银行</text>
							<text class="d-m-l-20">{{ item.khyh_label || '无数据源' }}</text>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
import { getStaff, homeWages } from '../../../common/api.js';
import uniDatetimePicker from './uni-datetime-picker/uni-datetime-picker.vue';
export default {
	components: {
		uniDatetimePicker
	},
	data() {
		return {
			info: null,
			nowWages: null,
			maxDate: null,
			minDate: null,
			rangeDate: []
		};
	},
	onLoad() {
		this.maxDate = this.$moment().format('YYYY-MM-DD');
		this.minDate = this.$moment()
			.subtract(1, 'years')
			.startOf('year')
			.format('YYYY-MM-DD');
		this.rangeDate = [
			this.$moment()
				.subtract(2, 'months')
				.format('YYYY-MM-DD'),
			this.$moment().format('YYYY-MM-DD')
		];
		this.init();
	},
	methods: {
		init() {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			getStaff({
				id: this.$user.ssgcxx[this.$appIndex].rybh, // 人员id
			}).then(e => {
				this.info = e.data;
				uni.hideLoading();
				this.homeWages();
			});
		},
		homeWages() {
			if (!this.$user.ssgcxx) {
				return false;
			}
			homeWages({
				params: {
					bzid: this.$user.ssgcxx[this.$appIndex].bzid, // 班组id
					rybh: this.$user.ssgcxx[this.$appIndex].rybh, // 人员id
					bt: this.rangeDate[0], // 开始
					et: this.rangeDate[1] // 结束
				}
			}).then(e => {
				this.nowWages = e.data;
			});
		},
		setDate(e) {
			if (e.length > 0) {
				this.rangeDate = e;
				this.homeWages();
			}
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fbfcfc;
}
.card {
	box-shadow: 0rpx 5rpx 10rpx rgba(0, 0, 0, 0.05);
	border-radius: 10rpx;
	background-color: #ffffff;
}

.date {
	background: #f6f7f8;
	margin-top: 30rpx;
}
</style>
